<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 418.48px;height: 267.06px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'city',
		data() {
			return{
				cockpitData:[]
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
						"normGuid": "cea3018d-4dbb-438b-8668-4c6c226cd2ac",
						"fieldList": [{
						    "key":"statictype",
						    "value":"宁波-企业专利数量及分类"
						}]
					}
				};
				var _this = this;
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				this.cockpitData=result.cockpitData
				this.$nextTick(()=>{
					this.myEcharts();
				})
			},
			myEcharts() {
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart);
				// let itemTitle=['发明专利','实用专利','外观专利']
				// let itemData=[268, 134, 11]
				let itemTitle=this.cockpitData.map(item=>{
					return item.patent_type
				})
				let itemData=this.cockpitData.map(item=>{
					return item.total
				})
				let barWidth = 30
				let colorArr = ["#3498BA", "#4EAEFC", "#3AE3FD"]
				let color = {
					type: "linear",
					x: 0,
					x2: 1,
					y: 0,
					y2: 0,
					colorStops: [
						{
						offset: 0,
						color: colorArr[0],
						},
						{
						offset: 0.5,
						color: colorArr[0],
						},
						{
						offset: 0.5,
						color: colorArr[1],
						},
						{
						offset: 1,
						color: colorArr[1],
						},
					],
				}
				//配置图表
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				const option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.9)',
					tooltip: {
						show: false,
					},
					legend: {
						show: false,
					},
					title:{
						show: false,
						// x: '65%',
						// y: 0,
						// subtext: '统计时间：'+ctime,
						// subtextStyle:{
						// 	fontSize: 15,
						// 	color:'#B7B7B7',
						// 	fontFamily:'Arial',
						// }
					},
					grid: {
						left: '3%',
						right: '20%',
						top: '20%',
						width: "85%",
						height:'75%',
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						},
						axisTick :{
							show:false
						},
						axisLabel: {
							color: '#DFF8FF',
							fontSize: 16,
							fontWeight:600,
							interval: 0
						}, 
						data: itemTitle,
						type: 'category',
						show: true,
					}],
					yAxis: [{
						splitLine: {
							show: true,
							lineStyle:{
								type:'dotted',
								color:'#556468',
								width:1
							}
						},
						axisLine: { //y轴
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						}, 
						name:'单位：件',
						nameLocation: "end",
						nameTextStyle:{
							color:'#99C8FF',
							fontSize:15,
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLabel: {
							color: 'rgba(255,255,255,0.6)',
							fontSize: 15,
							margin: 20
						},
					}],
					series: [{
							z: 1,
							name: '数据',
							type: "bar",
							barWidth: barWidth,
							barGap: "0%",
							data: itemData,
							itemStyle: {
								normal: {
								color: color,
								},
							},
						},
						{
							z: 2,
							name: '数据',
							type: "pictorialBar",
							data: itemData,
							symbol: "diamond",
							symbolOffset: ["0%", "60%"],
							symbolSize: [barWidth, 10],
							itemStyle: {
								normal: {
								color: color,
								},
							},
							tooltip: {
								show: false,
							},
						},
						{
							z: 3,
							name: '数据',
							type: "pictorialBar",
							symbolPosition: "end",
							data: itemData,
							symbol: "diamond",
							symbolOffset: ["0%", "-60%"],
							symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
							itemStyle: {
								normal: {
								borderColor: colorArr[2],
								borderWidth: 2,
								color: colorArr[2],
								},
							},
							label:{
								show:true,
								position:'top',
								color:'#04CDF4',
								fontSize:17,
								fontWeight:'bold'
							},
							tooltip: {
								show: false,
							},
						},]
				};
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
			}
		},
	}
</script>


<style>

</style>
